<template>
  <div class="product-list">
    <div v-if="showFilters" class="filters">
      <div class="filter-controls">
        <el-select v-model="selectedLevel1" @change="filterProducts">
          <el-option
            v-for="category in cartStore.fatherCategoryList"
            :key="category.id"
            :value="category.catId"
            :label="category.name"
          />
        </el-select>
<!--        <el-select v-model="selectedLevel2" :placeholder="$t('二级分类')" clearable @change="changeCategory">-->
<!--          <el-option-->
<!--            v-for="category in selected2List"-->
<!--            :key="category.id"-->
<!--            :value="category.catId"-->
<!--            :label="category.name"-->
<!--          />-->
<!--        </el-select>-->
      </div>
    </div>

    <el-empty v-if="!productsList.length" :description="$t('暂无商品')" />

    <div class="products-grid">
      <ProductCard
        v-for="product in productsList"
        :key="product.id"
        :product="product"
      />
    </div>

    <div class="pagination">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, prev, pager, next"
        background
        class="amazon-pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ProductCard from './ProductCard.vue'
import {ApiCommodityList, ApiGategoriesNode} from "@/api/commodity.js";
import {useRoute, useRouter} from "vue-router";
import useCartStore from "@/store/modules/cart.js";
import useLangStore from "@/store/modules/lang.js";
import {ElLoading} from "element-plus";

const props = defineProps({
  showFilters: {
    type: Boolean,
    default: false
  }
})

const route = useRoute()
const router = useRouter()
const cartStore = useCartStore()
const selectedLevel1 = ref(route.query.catId || '')
const selectedLevel2 = ref('')
const selected2List = ref([])
const productsList = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 加载数据
const getProducts = () => {
  const loading = ElLoading.service()
  const params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    level1: selectedLevel1.value,
    type:0,
    // level2: selectedLevel2.value,
    countryId: useLangStore().languageId
  }
  ApiCommodityList(params).then(res => {
    productsList.value = res.rows
    total.value = res.total
  }).finally(() => {
    loading.close()
  })
}

const getGategoriesNode = () => {
  ApiGategoriesNode({
    catid: selectedLevel1.value
  }).then(res => {
    selected2List.value = res.data
  })
}

const filterProducts = () => {
  router.push({
    path: '/products/category',
    query: {
      catId: selectedLevel1.value,
      name: cartStore.fatherCategoryList.find(c => c.catId === selectedLevel1.value)?.name
    }
  })
}
const changeCategory = () => {
  getProducts()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  getProducts()
}

const handleCurrentChange = (val) => {
  pageNum.value = val
  getProducts()
}

const initData = () => {
  selectedLevel1.value = route.query.catId || ''
  selectedLevel2.value = ''
  getGategoriesNode()
  getProducts()
}

defineExpose({
  initData
})
</script>

<style lang="scss" scoped>
.product-list {
  .filters {
    margin-bottom: 20px;
  }

  .filter-controls {
    display: flex;
    gap: 16px;
  }

  .filter-select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 150px;
  }

  .products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;

    @media (max-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
:deep(.amazon-pagination) {
  .el-pagination__total {
    color: #565959;
  }

  .el-pager li {
    &:not(.is-disabled).is-active {
      background-color: #f0c14b;
      border-color: #a88734;
    }
  }
}
</style>
